<template>
	<view class="content">
		<view class="swiper">
			<u-swiper :list="bannerImgs"></u-swiper>
		</view>
		<view class="toce">
			<u-notice-bar :text="notices" bgColor='#FFF' color='#881f23'></u-notice-bar>
		</view>
		<view class="bottom">
			<button
				v-if="!token"
				class="loginForm"
			      open-type="getPhoneNumber"
			      @getphonenumber="handleGetPhoneNumber"
			      type="primary"
			    >
			      
			    </button>
			<button
				v-if="!token"
				class="loginShop"
			      open-type="getPhoneNumber"
			      @getphonenumber="handleGetPhoneNumber"
			      type="primary"
			    >
			      
			    </button>
			<view class="module">
				<view class="flex">
					<view class="text">体检中心</view>
					<view class="text" @click="goUrl">养生商城</view>
				</view>
			</view>
			<view class="description">
				<view class="title">中医百科</view>
				<view class="list">
					<view class="flex" v-for="(item,index) in descraptionData" :key="index">
						<view class="left">{{item.text}}</view>
						<image src="/static/img/1.jpg"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
	    data() {
	      return {
			token:uni.getStorageSync('token'),
			notices: '合肥香薷诊所祝您身体健康',
	        bannerImgs: [
	          "/static/img/1.jpg",
	          "/static/img/3.jpg",
	        ],
			descraptionData:[
				{text:'气血不足容易失眠？看看你属于哪一种失眠'},
				{text:'【中医科普】中医养生小知识，你了解多少？'},
				{text:'妇科常见病，中医治疗显奇效'},
			]
	      };
	    },
		methods:{
			goUrl(){
				uni.switchTab({
					url:'../tabBar/home/home'
				})
			},
			
			// 获取手机号回调
			    async handleGetPhoneNumber(e) {
					let _self = this
					this.goUrl()
			      if (e.detail.errMsg !== 'getPhoneNumber:ok') {
			        uni.showToast({ title: '用户拒绝授权', icon: 'none' });
			        return;
			      }
			
			      // 1. 获取微信登录 code（用于后端换取 openid）
			      const [loginErr, loginRes] = await uni.login({
			        provider: 'weixin',
			      });
			      if (loginErr) {
			        uni.showToast({ title: '微信登录失败', icon: 'none' });
			        return;
			      }
			
			      // 2. 发送 code + encryptedData + iv 到后端
			      uni.showLoading({ title: '登录中...' });
			      const [reqErr, res] = await uni.request({
			        // url: 'https://192.168.2.12:8080/wxapi/wxlogin', // 替换为你的后端接口
					url:'https://101.132.103.231/wxapi/wxlogin',
			        method: 'POST',
			        data: {
			          code: loginRes.code,           // 微信 code
			          encryptedData: e.detail.encryptedData, // 加密数据
			          iv: e.detail.iv,              // 解密向量
			        },
			      });
			      uni.hideLoading();
			
			      if (reqErr || res.data.code !== 200) {
			        uni.showToast({ title: '登录失败', icon: 'none' });
			        return;
			      }
				console.log('登录成功11111111')
				console.log(res)
				console.log('登录成功2222222222')
				if(res.data.code == 200){
					// 3. 登录成功，存储 token 和用户信息
					console.log(res.data.data.openId)
					uni.setStorageSync('token', res.data.data.token);	
					uni.setStorageSync('openId', res.data.data.openId);
					uni.setStorageSync('userId',res.data.data.userId)
					uni.setStorageSync('userPhone',res.data.data.userMobile)
					this.goUrl()
				}
			      
			    },
		}
	  };
</script>

<style lang="scss" scoped>
	.content{
		width:100%;
		height:100%;
		.toce{
			width:80%;
			margin:0 auto;
		}
		.bottom{
			padding:10rpx 20rpx;
			background: #eee;
			position: relative;
			.loginForm{
				position: absolute;
				left: 40rpx;
				top:50rpx;
				background: #fff;width:180rpx;height:180rpx;border-radius: 180rpx;
				opacity: 0;
			}
			.loginShop{
				position: absolute;
				left: 270rpx;
				top:50rpx;
				background: red;width:180rpx;height:180rpx;border-radius: 180rpx;
				opacity: 0;
			}
			.module{
				width:100%;
				height:100%;
				margin-bottom: 20rpx;
				background: #fff;
				.flex{
					display: flex;
					align-items: center;
					padding: 40rpx 20rpx;
					.text{
						width:180rpx;
						height:180rpx;
						border-radius: 180rpx;
						background: #881f23;
						color: #FFF;
						font-size: 40rpx;
						line-height: 180rpx;
						text-align: center;
						margin-right: 50rpx;
						font-family: monospace;
						font-weight: bold;
					}
				}
				
			}
			.description{
				padding: 20rpx;
				background: #fff;
				.title{
					padding: 10rpx 0 10rpx 10rpx;
					color:#881f23;
					font-size: 45rpx;
					font-family: monospace;
					font-weight: bold;
					font-weight: bold;
					border-left: 8rpx solid #881f23;
				}
				.list{
					.flex{
						display: flex;
						font-size: 40rpx;
						padding: 10rpx 0 60rpx 0;
						border-bottom: 5rpx solid #eee;
						.left{
							flex: 1;
						}
						image{
							width:200rpx;
							height:120rpx;
							margin-left: 40rpx;
						}
					}
				}
			}
		}
	}
</style>